<!--电影展示页面-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <link type="text/css" href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <script language="JavaScript">
        $(function () {
            get_movies_data();
            //分页操作
            movies_paginater();
        });

        //ajax请求接口并显示地址数据
        function get_areas_data() {
            var url = "http://127.0.0.1:9000/api/v1/home/";
            $.get(url,function (result){
                if(result.status === 200){
                    area = result.data.area;
                    show_areas(area);
                    //热门城市单击选择
                    show_choice_hot_area();
                }
            })
        }

        //分页功能函数
        function movies_paginater() {
            $('.movies_next_page').click(function () {
                var url = "http://127.0.0.1:9000/api/v1/movie/";
                $.get(url,function (result) {
                    page = result.data.movie.page;
                    page = page + 1;
                    get_movies_data(page)
                })
            })
        }

        //ajax请求接口并显示电影数据
        function get_movies_data(page=1){
            var url = "http://127.0.0.1:9000/api/v1/movie?tag=1&page="+ page;
            $.get(url,function (result) {
                if(result.status === 200){
                    movie = result.data.movie;
                    hot_movies = movie.hot_movies;
                    will_movies = movie.will_movies;

                    //生成hot_movies
                    show_hot_movies(hot_movies);
                    //生成will_movies
                    show_will_movies(will_movies);
                    //鼠标移入移出事件
                    hot_des_event();

                }
            })
        }

        //  显示热门电影数据
        function show_hot_movies(hot_movies) {
            for (let movie of hot_movies) {
                let movie_img_url = 'https://img.alicdn.com/bao/uploaded/' + movie.pic;
                $("#show_hot_movie>ul").append(
                    $('<li>').css({width:'160px',marginRight:'50px',position:'relative',marginTop:'30px'}).addClass("pull-left show_movie_detail").attr('movie_id',movie.mid)
                        .append(
                            $('<div>')
                                .append(
                                    $('<div>').addClass("bg-danger")
                                        .append(
                                            $('<img>').attr('src', movie_img_url).css({width:"160" , height:"224"})
                                        )
                                        .append(
                                            $('<div>').addClass("clearfix").css({position: 'absolute',top:'200px', width:'160px',height: '30px',color:'white'})
                                                .append(
                                                    $('<span>').addClass("pull-left").text(movie.show_name)
                                                )
                                                .append(
                                                    $('<span>').addClass("pull-right").text(movie.screening_model)
                                                )
                                        )
                                )
                        )
                        .append(
                            $('<div>').css({display: 'none',background:'black',opacity:0.7,width:"160" , height:"224",padding:'15px',position: 'absolute',top:' 0',left: '0px' }).addClass("movie_text")
                                .append(
                                    $('<div>')
                                        .append($('<span>').text('导演:'+movie.director))
                                        .append($('<span>').text('主演:'+movie.leading_role))
                                        .append($('<span>').text('类型:'+movie.type))
                                        .append($('<span>').text('地区:'+movie.country))
                                        .append($('<span>').text('语言:'+movie.language))
                                        .append($('<span>').text('片长:'+movie.duration))
                                )
                        )
                        .append(
                            $('<div>').css({height: '30px' , background: 'red'}).addClass("text-center")
                                .append(
                                    $('<a>')
                                        .text('选票购坐')
                                        .css({color : 'white'})
                                        .addClass("middle")
                                )
                        )
                )

            }
        }

        //显示即将上映的电影
        function show_will_movies(hot_movies) {
            for (let movie of hot_movies) {
                let movie_img_url = 'https://img.alicdn.com/bao/uploaded/' + movie.pic;
                $("#show_will_movie>ul").append(
                    $('<li>').css({width:'160px',marginRight:'50px',position:'relative',marginTop:'30px'}).addClass("pull-left show_movie_detail").attr('movie_id',movie.mid)
                        .append(
                            $('<div>')
                                .append(
                                    $('<div>').addClass("bg-danger")
                                        .append(
                                            $('<img>').attr('src', movie_img_url).css({width:"160" , height:"224"})
                                        )
                                        .append(
                                            $('<div>').addClass("clearfix").css({position: 'absolute',top:'200px', width:'160px',height: '30px',color:'white'})
                                                .append(
                                                    $('<span>').addClass("pull-left").text(movie.show_name)
                                                )
                                                .append(
                                                    $('<span>').addClass("pull-right").text(movie.screening_model)
                                                )
                                        )
                                )
                        )
                        .append(
                            $('<div>').css({display: 'none',background:'black',opacity:0.7,width:"160" , height:"224",padding:'15px',position: 'absolute',top:' 0',left: '0' }).addClass("movie_text")
                                .append(
                                    $('<div>')
                                        .append($('<span>').text('导演:'+movie.director))
                                        .append($('<span>').text('主演:'+movie.leading_role))
                                        .append($('<span>').text('类型:'+movie.type))
                                        .append($('<span>').text('地区:'+movie.country))
                                        .append($('<span>').text('语言:'+movie.language))
                                        .append($('<span>').text('片长:'+movie.duration))
                                )
                        )
                        .append(
                            $('<div>').css({height: '30px' , background: 'red'}).addClass("text-center")
                                .append(
                                    $('<a>')
                                        .text('选票购坐')
                                        .css({color : 'white'})
                                        .addClass("middle")
                                )
                        )
                )

            }
        }

        //电影详情移入移出事件
        function hot_des_event() {
            $('.show_movie_detail')
                .mouseover(function () {
                    $(this).find('.movie_text').slideDown('fast')
                })
                .mouseleave(function () {
                    $(this).find('.movie_text').slideUp('fast')
                })
                .click(function () {
                    movie_id = $(this).attr('movie_id');
                    window.location.href = 'movie_detail.html?movie_id='+movie_id;

                })
        }


    </script>
</head>
<body>
<!--导航栏-->
<nav class="navbar navbar-default " style="height:20px;">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class="navbar-brand" href="index.html">淘票票</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">电影 <span class="sr-only"></span></a></li>
                <li><a href="#">音乐</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle glyphicon glyphicon-user" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">用户详情<span class="caret"></span></a>
                    <ul class="dropdown-menu bg-danger">
                        <li><a href="#">用户名</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->

    </div><!-- /.container-fluid -->
</nav>
<!--链接栏-->
<div class="container-fluid">
    <div class="col-lg-12">
        <ul class="nav nav-tabs nav-justified" >
            <li role="presentation" class=" dropdown" id="show_areas"></li>
            <li role="presentation" ><a href="index.html" style="font-size: 30px">首页</a></li>
            <li role="presentation"><a href="movies_list.html" style="font-size: 30px">影片</a></li>
            <li role="presentation"><a href="cinemas_list.html" style="font-size: 30px">影院</a></li>
        </ul>
    </div>
</div>


<!--显示影片上映热映-->
<div class="col-lg-12">
    <ul class="nav nav-tabs choice_movie">
        <li role="presentation"  ><a href="#show_hot_movie" data-toggle="tab" >正在热映<span class="hot_count"></span></a></li>
        <li role="presentation" ><a href="#show_will_movie" data-toggle="tab" >即将上映<span class="will_count"></span></a></li>
    </ul>
</div>
<!--切换影片上映热-->
<div class="container tab-content " id="myTabContent" >
    <div class="col-lg-8  tab-pane fade in active text-center" id='show_hot_movie'>
        <ul class="list-unstyled clearfix " ></ul>
        <div class="movies_next_page bg-primary col-lg-offset-3" style="height: 50px;padding: 15px;width: 200px">点击加载更多</div>
    </div>
    <div class="col-lg-8 tab-pane fade" id='show_will_movie'>
        <ul class="list-unstyled clearfix  " ></ul>
        <div class="movies_next_page">点击加载更多</div>
    </div>
</div>

</body>
</html>